<template>
  <view class="page">
    <view class="head">
      <view class="head1">
        <text class="iconfont icon-fenxiang1" @click="goBack"></text>
        <text class="nav-title">商品评价</text>
      </view>
    </view>

    <view class="main">
      <!-- 菜单 -->
      <view class="menu-nav">
        <view class="nav" ref="nav" :style="navList.length <= 5 ? 'flex-direction: row' : ''">
          <view 
            class="list" 
            v-for="(item, index) in navList" 
            :key="item.id"
            @click="onTab(item)"
            :class="{'active': selectedItem && selectedItem.id === item.id}">
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 详情 -->
      <view class="detail">
        <view class="appraise">
          <view class="appraise-content">
            <image src="../../../static/logo.png" mode=""></image>
          </view>
          <view class="content">
            <view class="top">
              匿名用户
            </view>

            <!-- 根据 selectedItem 来显示不同的评论内容 -->
            <view class="center">
              {{ selectedItem ? selectedItem.content : '请选择一个评价' }}
            </view>
            <view class="bottom">
              <view class="address">
                {{ selectedItem ? selectedItem.address : '' }}
              </view>
              <view class="date">
                {{ selectedItem ? selectedItem.date : '' }}
              </view>
            </view>
            <view class="border"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
	export default {
	 data() {
	   return {
	     selectedItem: null, 
	     navList: [
	       {
	         id: 1,
	         name: '好评',
	         content: '环境很好，服务态度很好，下次还会再来！',
	         address: 'IP：赤峰市 · 红山区',
	         date: '2024-05-06'
	       },
	       {
	         id: 2,
	         name: '中评',
	         content: '还可以，稍微有点改进的空间。',
	         address: 'IP：赤峰市 · 红山区',
	         date: '2024-06-01'
	       },
	       {
	         id: 3,
	         name: '差评',
	         content: '很失望，不会再来了。',
	         address: 'IP：赤峰市 · 红山区',
	         date: '2024-07-12'
	       },
	       {
	         id: 4,
	         name: '追评',
	         content: '追评后效果不错，比第一次好。',
	         address: 'IP：赤峰市 · 松山区',
	         date: '2024-08-20'
	       }
	     ]
	   };
	 }
,
	  mounted() {
	    this.selectedItem = this.navList[0];  // 默认选中第一个项
	  },
	 methods: {
	   onTab(item) {
	     this.selectedItem = item;  // 更新选中的评论项
	   },
	   goBack() {
	     uni.navigateBack(-1);  // 返回上一页
	   }
	 }

	};

</script>

<style scoped lang="scss">
	@import 'appraise.scss';
	  
</style>